<template>
    <popup-dialog
        :dialogShow="show"
        :title="$t('wp-ke-hu-dang-an')"
        @close="closeDialog">
        <div class="centent">
            <line-cell
                :listSetProps="listprops"
                :listData="customerInfo">
            </line-cell>
        </div>
    </popup-dialog>
</template>

<script>
import { computed, reactive, toRefs } from 'vue';
import PopupDialog from '@/components/_common/PopupDialog.vue';
import LineCell from '@/components/_common/LineCell.vue';
import { selfI18n } from '@/i18n/index';

export default {
    components: {
        PopupDialog,
        LineCell
    },
    props: {
        dialogShow: Boolean,
        customerInfo: Object
    },
    emits: ['close'],
    setup (props, ctx) {
        const $st = selfI18n;

        const state = reactive({
            listprops: [{
                id: 'customer_name',
                label: $st('wp-ke-hu-ming-cheng')
            }, {
                id: 'address',
                label: $st('wp-di-zhi')
            }, {
                id: 'contactperson',
                label: $st('wp-lian-xi-ren')
            }, {
                id: 'contactway',
                label: $st('wp-lian-xi-fang-shi')
            }, {
                id: 'contactaccount',
                label: $st('wp-yun-zhang-hao')
            }, {
                id: 'area',
                label: $st('wp-qu-yu')
            }, {
                id: 'mainbusiness',
                label: $st('wp-zhu-ying-ye-wu')
            }, {
                id: 'seller_account',
                label: $st('wp-ze-ren-xiao-shou'),
                formatter: (item) => {
                    return item.seller_name ? item.seller_account + ' (' + item.seller_name + ')' : item.seller_account;
                }
            }, {
                id: 'label',
                label: $st('wp-biao-qian'),
                formatter: (item) => {
                    return item.label.join('，');
                }
            }, {
                id: 'remark',
                label: $st('wp-bei-zhu')
            }]
        });

        // computed
        const show = computed(() => {
            return props.dialogShow;
        });

        // 关闭弹窗
        const closeDialog = () => {
            ctx.emit('close');
        };

        return {
            ...toRefs(state),
            show,
            closeDialog
        };
    }
};
</script>
<style lang="scss" scoped>
.centent {
    padding: 15px 20px;
    max-height: 370px;
    overflow-y: auto;
}
</style>
